import { UaCardSearchRequest, EnergyTypeMap, CardCategoryMap, TriggerTypeMap, EnergyType, EnergyTypeList, RareList, CardCategoryList, TriggerTypeList, CardCategory, TriggerType } from "../../models/ua-card.model";

// components/ua-card-filter/ua-card-filter.component.ts
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    defaultSearchRequest: { type: Object, value: {} },
    needEnergyCountMax: { type: Number, value: 15 },
    bpMax: { type: Number, value: 10000 },
    generateEnergyCountMax: { type: Number, value: 3 },
    attributes: { type: String, value: '' },
    packNos: { type: String, value: '' },
    color: { type: String, value: '' },
    category: { type: String, value: '' },
    hasSearch: { type: Boolean, value: false },
    keyWords: { type: String, value: '' }
  },

  observers: {
    'defaultSearchRequest': function () {
      console.log('defaultSearchRequest')
      const data = this.data.defaultSearchRequest as UaCardSearchRequest;
      this.setData({
        needEnergyCount: [data.needEnergyCountMin!, data.needEnergyCountMax!],
        needEnergyCountDefault: [data.needEnergyCountMin!, data.needEnergyCountMax!],
        needAp: [data.needApMin!, data.needApMax!],
        needApDefault: [data.needApMin!, data.needApMax!],
        bp: [data.bpMin!, data.bpMax!],
        bpDefault: [data.bpMin!, data.bpMax!],
        generateEnergyCount: [data.generateEnergyCountMin!, data.generateEnergyCountMax!],
        generateEnergyCountDefault: [data.generateEnergyCountMin!, data.generateEnergyCountMax!],
        attribute: data.attribute,
        attributeText: !!data.attribute ? data.attribute : '不限',
        packNo: data.packNo,
        packNoText: !!data.packNo ? data.packNo : '不限',
        needEnergyText: !!data.needEnergyType ? EnergyTypeMap[data.needEnergyType] : '全部颜色',
        needEnergyType: data.needEnergyType ?? '',
        generateEnergyText: !!data.generateEnergyType ? EnergyTypeMap[data.generateEnergyType] : '全部颜色',
        generateEnergyType: data.generateEnergyType ?? '',
        cardCategoryText: !!data.cardCategory ? CardCategoryMap[data.cardCategory] : '不限类型',
        cardCategory: data.cardCategory ?? '',
        triggerTypeText: !!data.triggerType ? TriggerTypeMap[data.triggerType] : '不限',
        triggerType: data.triggerType ?? '',
        cardKeyWords: data.cardKeyWords ?? ''
      });
      setTimeout(() => {
        this.searchClick();
      }, 300);
    },
    'attributes': function () {
      const attributes = this.data.attributes;
      let attributeStrs: string[] = [];
      if (!!attributes) {
        attributeStrs = attributes.split(',');
      }
      const attributeList = [{ label: "不限", value: '' }];
      for (const attr of attributeStrs) {
        attributeList.push({
          label: attr, value: attr
        })
      }
      this.setData({ attributeList, attributeShow: true });
    },
    'packNos': function () {
      const packNos = this.data.packNos;
      let packStrs: string[] = [];
      if (!!packNos) {
        packStrs = packNos.split(',');
      }
      const packNoList = [{ label: "不限", value: '' }];
      for (const pack of packStrs) {
        packNoList.push({
          label: pack, value: pack
        })
      }
      this.setData({ packNoList, packNoShow: true });
    },
    'color': function () {
      const type = this.data.color as EnergyType;
      this.setData({
        needEnergyType: type,
        needEnergyText: !!type ? EnergyTypeMap[type] : '全部颜色',
      })
    },
    'category': function () {
      const cardCategory = this.data.category as CardCategory;
      this.setData({
        cardCategory,
        cardCategoryText: !!cardCategory ? CardCategoryMap[cardCategory] : '不限类型',
      })
      this.searchClick();
    },
    'keyWords': function () {
      this.setData({
        cardKeyWords: this.data.keyWords
      });
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    gridMode: true,
    needEnergyCount: [0, 15],
    needEnergyCountDefault: [0, 15],
    needAp: [1, 2],
    needApDefault: [1, 2],
    needApMax: 2,
    bp: [0, 10000],
    bpDefault: [0, 10000],
    generateEnergyCount: [0, 3],
    generateEnergyCountDefault: [0, 3],
    filterPanelVisible: false,
    needEnergyText: '全部颜色',
    needEnergyTypeList: [{ label: "全部颜色", value: '' }, ...EnergyTypeList],
    needEnergyVisible: false,
    needEnergyType: '',
    // generateEnergyText: '全部颜色',
    // generateEnergyTypeList: [{ label: "全部颜色", value: '' }, ...EnergyTypeList],
    // generateEnergyVisible: false,
    // generateEnergyType: '',
    rareText: '全部',
    rareList: [{ label: "全部", value: '' }, ...RareList],
    rareVisible: false,
    rare: '',
    cardCategoryText: '不限类型',
    cardCategoryList: [{ label: "不限类型", value: '' }, ...CardCategoryList],
    cardCategoryVisible: false,
    cardCategory: '',
    triggerTypeText: '不限',
    triggerTypeList: [{ label: "不限", value: '' }, ...TriggerTypeList],
    triggerTypeVisible: false,
    triggerType: '',
    attributeText: '不限',
    attributeList: [{ label: "不限", value: '' }],
    attributeVisible: false,
    attribute: '',
    attributeShow: false,
    packNoText: '不限',
    packNoList: [{ label: "不限", value: '' }],
    packNoVisible: false,
    packNo: '',
    packNoShow: false,
    cardKeyWords: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changeModeClick() {
      this.setData({
        gridMode: !this.data.gridMode,
        needEnergyVisible: false,
        cardCategoryVisible: false,
        filterPanelVisible: false
      });
      this.triggerEvent('onmodechange', this.data.gridMode);
    },

    searchClick() {
      this.setData({
        cardCategoryVisible: false,
        needEnergyVisible: false,
        filterPanelVisible: false,
      });
      const data: UaCardSearchRequest = {
        needEnergyCountMin: this.data.needEnergyCount[0],
        needEnergyCountMax: this.data.needEnergyCount[1],
        needEnergyType: !!this.data.needEnergyType ? this.data.needEnergyType as EnergyType : undefined,
        bpMin: this.data.bp[0],
        bpMax: this.data.bp[1],
        generateEnergyCountMin: this.data.generateEnergyCount[0],
        generateEnergyCountMax: this.data.generateEnergyCount[1],
        // generateEnergyType: !!this.data.generateEnergyType ? this.data.generateEnergyType as EnergyType : undefined,
        needApMin: this.data.needAp[0],
        needApMax: this.data.needAp[1],
        cardCategory: !!this.data.cardCategory ? this.data.cardCategory as CardCategory : undefined,
        triggerType: !!this.data.triggerType ? this.data.triggerType as TriggerType : undefined,
        attribute: this.data.attribute,
        packNo: this.data.packNo,
        rare: this.data.rare,
        cardKeyWords: !!this.data.cardKeyWords ? this.data.cardKeyWords : undefined
      }
      this.triggerEvent('onsearch', JSON.parse(JSON.stringify(data)));
    },

    resetClick() {
      const data = this.data.defaultSearchRequest as UaCardSearchRequest;
      data.bpMin = 0;
      data.bpMax = this.data.bpMax;
      data.generateEnergyCountMin = 0;
      data.generateEnergyCountMax = this.data.generateEnergyCountMax;
      data.needApMin = 1;
      data.needApMax = 2;
      data.needEnergyCountMin = 0;
      data.needEnergyCountMax = this.data.needEnergyCountMax;
      data.attribute = '';
      data.packNo = '';
      data.cardCategory = undefined;
      data.generateEnergyType = undefined;
      data.needEnergyType = undefined;
      data.triggerType = undefined;
      data.rare = '';
      data.cardKeyWords = undefined;
      this.setData({
        cardKeyWords: '',
        triggerTypeText: '不限',
        triggerType: '',
        cardCategoryText: '不限类型',
        cardCategory: '',
        // generateEnergyText: '全部颜色',
        // generateEnergyType: '',
        needEnergyText: '全部颜色',
        attributeText: '不限',
        attribute: '',
        packNoText: '不限',
        packNo: '',
        rareText: '全部',
        rare: '',
        needEnergyType: '',
        // needEnergyCountMax: data.needEnergyCountMax,
        // needApMax: data.needApMax,
        // bpMax: data.bpMax,
        // generateEnergyCountMax: data.generateEnergyCountMax,
        needEnergyCount: [data.needEnergyCountMin!, data.needEnergyCountMax!],
        needAp: [data.needApMin!, data.needApMax!],
        bp: [data.bpMin!, data.bpMax!],
        generateEnergyCount: [data.generateEnergyCountMin!, data.generateEnergyCountMax!],
        needEnergyCountDefault: [data.needEnergyCountMin!, data.needEnergyCountMax!],
        needApDefault: [data.needApMin!, data.needApMax!],
        bpDefault: [data.bpMin!, data.bpMax!],
        generateEnergyCountDefault: [data.generateEnergyCountMin!, data.generateEnergyCountMax!]
      });
      this.triggerEvent('onreset', JSON.parse(JSON.stringify(data)));
    },

    onCardCategoryPanelDisplay() {
      if (!this.data.cardCategoryVisible) {
        this.setData({
          cardCategoryVisible: true,
          filterPanelVisible: false,
          needEnergyVisible: false
        });
      } else {
        this.setData({
          cardCategoryVisible: false,
          filterPanelVisible: false,
          needEnergyVisible: false
        });
      }
    },

    onCardCategoryPanelDisplayChange(e: any) {
      this.setData({
        cardCategoryVisible: e.detail.visible,
      });
    },

    onCardCategoryConfirm(e: any) {
      this.setData({
        cardCategoryText: e.currentTarget.dataset['label'],
        cardCategory: e.currentTarget.dataset['value']
      });
    },

    onNeedEnergyTypePanelDisplay() {
      if (!this.data.needEnergyVisible) {
        this.setData({
          needEnergyVisible: true,
          filterPanelVisible: false,
          cardCategoryVisible: false,
        });
      } else {
        this.setData({
          needEnergyVisible: false,
          filterPanelVisible: false,
          cardCategoryVisible: false,
        });
      }
    },

    onNeedEnergyTypePanelDisplayChange(e: any) {
      this.setData({
        needEnergyVisible: e.detail.visible,
      });
    },

    onNeedEnergyTypeConfirm(e: any) {
      this.setData({
        needEnergyText: e.currentTarget.dataset['label'],
        needEnergyType: e.currentTarget.dataset['value']
      });
    },

    onNeedEnergyCountRangeChange(e: any) {
      this.setData({
        needEnergyCount: e.detail.value
      });
    },

    needEnergyQuickRange(e: any) {
      this.setData({
        needEnergyCount: [+e.currentTarget.dataset['min'], +e.currentTarget.dataset['max']]
      });
    },

    onFilterPanelDisplay() {
      if (!this.data.filterPanelVisible) {
        this.setData({
          filterPanelVisible: true,
          needEnergyVisible: false,
          cardCategoryVisible: false,
        });
      } else {
        this.setData({
          filterPanelVisible: false,
          needEnergyVisible: false,
          cardCategoryVisible: false,
        });
      }
    },

    onFilterPanelDisplayChange(e: any) {
      this.setData({
        filterPanelVisible: e.detail.visible,
      });
    },

    onAttributeConfirm(e: any) {
      this.setData({
        attributeText: e.currentTarget.dataset['label'],
        attribute: e.currentTarget.dataset['value'],
      });
    },

    onRareConfirm(e: any) {
      this.setData({
        rareText: e.currentTarget.dataset['label'],
        rare: e.currentTarget.dataset['value'],
      });
    },

    onPackNoPickerConfirm(e: any) {
      this.setData({
        packNoText: e.currentTarget.dataset['label'],
        packNo: e.currentTarget.dataset['value'],
      });
    },

    onTriggerTypePickerConfirm(e: any) {
      this.setData({
        triggerTypeText: e.currentTarget.dataset['label'],
        triggerType: e.currentTarget.dataset['value'],
      });
    },

    apQuickRange(e: any) {
      this.setData({
        needAp: [+e.currentTarget.dataset['min'], +e.currentTarget.dataset['max']]
      });
    },

    generateEnergyCountQuickRange(e: any) {
      this.setData({
        generateEnergyCount: [+e.currentTarget.dataset['min'], +e.currentTarget.dataset['max']]
      });
    },

    changeHandle(e: any) {
      const { value } = e.detail;
      this.setData({
        cardKeyWords: value,
      });
    },

    focusHandle() {
      this.setData({
        actionText: '取消',
      });
    },

    blurHandle() {
      this.setData({
        actionText: '',
      });
    },

    actionHandle() {
      this.setData({
        actionText: '',
      });
    },

    clear() {
      this.setData({
        cardKeyWords: ''
      });
      this.searchClick();
    },

  }
})